<section class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <div class="list-outer-wrap noBorder box-set">
        <tabset justified="true">
          <tab heading="{{tabs[0].header}}" select="retrieveCourses(2)" active="tabs[0].active">
             <div tab-fact-content class="course_list">
             	<div class="course_list_blue">
             		<div ng-repeat="course in courses | orderBy:course.id"  >
	             		<div class="course_mod box" ng-click="selectCourse($event, course.id);" ng-class="selectedCourse.id == course.id? 'click':''">
	                     <h1>{{course.title}}</h1>
	                     <p>
	                     	<span class="bor_l"><b>{{course.sport.name}}</b></span>
	                        <span class="bor_r"><b>{{course.price}}颗豆</b></span>
	                     </p>
	                  	</div>
                  	</div>
  					<button class="btn-release" ng-click="course.classTypeV=2;createForm();">创建</button>
             	</div>
             </div>
           </tab>
           
           <tab heading="{{tabs[1].header}}" select="retrieveCourses(3)" active="tabs[1].active">
            <div tab-fact-content class="course_list">
             	<div class="course_list_yell">
             		<div ng-repeat="course in courses | orderBy:course.id"  >
	             		<div class="course_mod box" ng-click="selectCourse($event, course.id);" ng-class="selectedCourse.id == course.id? 'click':''">
	                     <h1>{{course.title}}</h1>
	                     <p>
	                     	<span class="bor_l"><b>{{course.sport.name}}</b></span>
	                        <span class="bor_r"><b>{{course.price}}颗豆</b></span>
	                     </p>
	                  	</div>
                  	</div>
  					<button class="btn-release"  ng-click="course.classTypeV=3;createForm();">创建</button>
             	</div>
             </div>
           </tab>
           
           <tab heading="{{tabs[2].header}}" select="retrieveCourses(1)" active="tabs[2].active">
	           <div tab-fact-content class="course_list">
	            <div class="course_list_lave">
	           		<div ng-repeat="course in courses | orderBy:course.id"  >
	            		<div class="course_mod box" ng-click="selectCourse($event, course.id);" ng-class="selectedCourse.id == course.id? 'click':''">
	                    <h1>{{course.title}}</h1>
	                    <p>
	                       <span class="bor_l"><b>{{course.sport.name}}</b></span>
	                       <span class="bor_r"><b>{{course.price}}颗豆</b></span>
	                    </p>
	                 	</div>
	                </div>
				          <!--
			  					<button class="btn-release"  ng-click="course.classTypeV=1;createForm();">创建</button>
				            -->
	            </div>
	           </div>
           </tab>
       </tabset>
      </div>
    </div>
  </div>
  
  <div class="row">
   <form name="form" novalidate="novalidate">
  	<!-- create course info -->
    <div class="col-md-3 pull-right side_form" ng-class="page.useCreate==true?'show':''" id="transb1"> 
	      <div class="header">
	      	<h2>创建课程信息</h2>
	      </div>  
	      <div class="content">  
              <div class="position_rela">
                <table class="tran_table">
                  <tr>
                    <td>
                        <div class="btn-group col-md-9" role="group" aria-label="...">
                          <button type="button" ng-click="tabSwitch(2);course.classTypeV=2;tabs[0].active=true" class="btn btn-default col-md-6" ng-class="initVal.classTypeV==2?'ac':''">&nbsp;&nbsp;&nbsp;团体课&nbsp;&nbsp;&nbsp;</button>
                          <button type="button" ng-click="tabSwitch(3);course.classTypeV=3;tabs[1].active=true" class="btn btn-default col-md-6" ng-class="initVal.classTypeV==3?'ac':''">&nbsp;&nbsp;&nbsp;私教课&nbsp;&nbsp;&nbsp;</button>
                          <!--
                          <button type="button" ng-click="tabSwitch(1);course.classTypeV=1;tabs[2].active=true;" class="btn btn-default col-md-4" ng-class="initVal.classTypeV==1?'ac':''">&nbsp;&nbsp;&nbsp;自由课&nbsp;&nbsp;&nbsp;</button>
                          -->
                        </div>
                        <div class="errormsg">{{errMsg.emptyClassType}}</div>
                    </td>
                  </tr>
                  <tr><th>课程项目：</th></tr>
                  <tr>
                    <td>
                        <select class="table_select" data-ng-options="sport.value as sport.name for sport in sports" data-ng-model="course.sportV">
                            <option value="">请选择课程项目</option>
                        </select>
                        <div class="errormsg">{{errMsg.emptySporttype}}</div>
                    </td>
                  </tr>
                  <tr><th>课程价格</th></tr>
                  <tr>
                    <td>
                        <select class="table_select price" data-ng-options="price.priceInt as price.priceText for price in prices" data-ng-model="course.priceInt">
                            <option value="">请选择糖豆数量</option>
                        </select>
                        <div class="errormsg" >{{errMsg.emptyPrice}}</div> 
                    </td>
                  </tr>
                  <tr><th class="pad_b-1">课程名称</th></tr>
                  <tr>
                    <td class="pad_b-1">
                      <input type="text" class="input_style_01" ng-model="course.title">
                      <div class="errormsg" >{{errMsg.emptyTitle}}</div> 
                     </td>
                  </tr>
                 
                  <tr>
                    <th>课程简介</th> 
                  </tr>
                  <tr>
                    <td>
                      <textarea class="textarea_style_01" cols="20" rows="2" ng-model="course.description"></textarea>	
                    </td>
                  </tr>
                <tr>
			            <th colspan="2">课程图片</th> 
			          </tr>
			          
			          <tr>
			          	<td colspan="2">
			          		 <div class="cer_block ng-scope">
		                     	<div class="gallery-box">
		                     		<div class="thumbnail" ng-repeat="file in courseAddImages track by $index ">
		                     			<img alt="" ng-src="{{qiniuDomain}}{{file.key}}" >
		                     			<span class="fa-delete btn btn-danger" ng-click="delCourseImage(file.id,'Add')">X</span>
		                        </div>
			          						<div qiniu-upload class="addcer drop" uptoken-url="course/image/uptoken" id="pickfilesAdd" files="courseAddImages"></div>
			          					</div>
		          			  </div>
			          	</td>
			          </tr>
                </table>
                <div class="row fixed_bottom_btn operate">
                     <button class="btn btn-lg btn-default btn-block w-48 fl-left" ng-click="unCreateForm()">取消</button>
                     <button class="btn btn-lg btn-danger btn-block w-48 fl-right" ng-click="createCourse()">创建</button>
                </div>
             </div>
        </div>
      </div>
			 <!-- view course info or edit -->
			 <div class="col-md-3 pull-right side_form" ng-class="!utils.isUndefinedOrNull(selectedCourse)==true?'show':''" id="transb1">
			        <div class="header">
			        	<h2 ng-show="!page.useEdit">查看课程信息</h2>
			        	<h2 ng-show="page.useEdit">编辑课程信息</h2>
			        </div>
		        <div class="content">
              	  <div class="position_rela">
			        <table class="tran_table">
			         <tr>
			            <th>课程类型：</th> 
			            <td style="position:relative;">
			            	<div ng-show="page.useEdit">
				            	{{selectedCourse.classType.name}}
			            		<a class="delete_course" ng-show="page.useEdit" ng-click="deleteForm();">删除</a>
			            	</div>
			            	<div ng-show="!page.useEdit">
			            		{{originCourse.classType.name}}
			            	</div>
			            </td>
			         </tr>
			         <tr>
			            <th>课程项目：</th> 
			            <td>
			            	<div ng-show="!page.useEdit">
			            		{{originCourse.sport.name}}
			            	</div>
			            </td>
			          </tr>
                      <tr>
                        <td colspan="2">
			            	<div ng-show="page.useEdit">
				            	<select class="table_select" data-ng-options="sport.value as sport.name for sport in sports" data-ng-model="selectedCourse.sport.value">
				            		<option value="">请选择课程项目</option>
				            	</select>
				            	<div class="errormsg">{{errMsg.emptySporttype}}</div>
			            	</div>
                        </td>
                      </tr>
			          <tr>
			            <th>课程价格：</th> 
			            <td>
			            	<div ng-show="!page.useEdit">
			            		<span class="douz"> X {{originCourse.price}}</span>
			            	</div>
			            </td>
			          </tr>
                      <tr>
                         <td colspan="2">
			            	<div ng-show="page.useEdit">
				            	<select class="table_select price" data-ng-options="price.priceInt as price.priceText for price in prices" data-ng-model="selectedCourse.priceInt">
				            		<option value="">请选择糖豆数量</option>
				            	</select>
				            	<div class="errormsg" >{{errMsg.emptyPrice}}</div>
			            	</div>
			            </td>
			          </tr>

			          <tr>
			            <th class="pad_b-1">课程名称：</th> 
			            <td class="pad_b-1">
			              <div ng-show="!page.useEdit">
			            		{{originCourse.title}}
			              </div>
			            </td>
			          </tr>
                      <tr>
                         <td colspan="2">                           
			               <div ng-show="page.useEdit">
                             <input type="text" class="input_style_01" ng-model="selectedCourse.title">
                             <div class="errormsg" >{{errMsg.emptyTitle}}</div>
			               </div>
                         </td>
                      </tr>
			         
			          <tr>
			            <th colspan="2">课程简介：</th> 
			          </tr>
			          <tr>
			            <td colspan="2">
			              <div ng-show="!page.useEdit">
			              	  <p class="textarea_p">
                                  {{originCourse.description}}
                              </p>	
			              </div>
			              <div ng-show="page.useEdit">
				              <textarea class="textarea_style_01" cols="15" rows="2" ng-model="selectedCourse.description" maxlength="255"></textarea>	
			              </div>
			            </td>
			          </tr>
			          
			          <tr>
			            <th colspan="2">课程图片</th> 
			          </tr>
			          
			          <tr>
			          	<td colspan="2">
			          		 <div class="cer_block ng-scope">
		                     	<div ng-show="page.useEdit" class="gallery-box">
		                     		<!-- original images -->
			                     		<div class="thumbnail" ng-repeat="img in selectedCourse.images">
			                          <img ng-src="{{img.url}}" >
			                          <span class="fa-delete btn btn-danger" ng-click="delOriginCourseImage($index,img.id)">X</span>
			                        </div>
		                      	<!--  original end -->
		                     		<div class="thumbnail" ng-repeat="file in courseEditImages track by $index ">
		                     			<img alt="" ng-src="{{qiniuDomain}}{{file.key}}" >
		                     			<span class="fa-delete btn btn-danger" ng-click="delCourseImage(file.id,'Edit')">X</span>
		                        </div>
			          						<div qiniu-upload class="addcer drop" uptoken-url="course/image/uptoken" id="pickfilesEdit" files="courseEditImages"></div>
			          					</div>
		          			  
				          			  <div ng-show="!page.useEdit" class="cer_block ng-scope">
				                     	<div class="gallery-box">
				                     		<!-- original images -->
					                     		<div class="thumbnail" ng-repeat="img in originCourse.images">
					                          <img ng-src="{{img.url}}" >
					                        </div>
				                      	<!--  original end -->
					          					</div>
				          			  </div>
		          			  </div>
			          	</td>
			          </tr>
                   </table>
                    <div class="operate">
                        <div class="row fixed_bottom_btn" ng-show="!page.useEdit">
                                <button class="btn btn-lg btn-default btn-block w-48 fl-left" ng-click="unViewForm();">取消</button>
                                <button class="btn btn-lg btn-danger btn-block w-48 fl-right" ng-click="editForm();">编辑</button>
                       </div>
                       <div class="row fixed_bottom_btn" ng-show="page.useEdit">
                                <button class="btn btn-lg btn-default btn-block w-48 fl-left" ng-click="unEditForm()">取消</button>
                                <button class="btn btn-lg btn-danger btn-block w-48 fl-right" ng-click="updateCourse();">保存</button>
                       </div>
                    </div>
                  </div>
                    
                    
		        </div>
		    </div>
		 </form>
	  </div>
	  <div  id="container" style="display: none"></div>
	 
	   <div ng-show="page.useOffEditConfirm" off-edit-confirm
	      	   opt_confirm="reUnEditForm();" 
	      	   opt_cancel="page.useOffEditConfirm=false">
	      	   <p>您编辑的课程尚未保存，确定要取消编辑吗？</p>
	   </div>
	   
	   <div ng-show="page.useDelConfirm" delete-confirm
	      	   opt_confirm="deleteCourse(selectedCourse)" 
	      	   opt_cancel="unDeleteForm();">
	      	   <p>您确定要删除<span>{{selectedCourse.title}}</span>课程吗？删除后该课程将不再循环出现在课程里表中。（请慎重操作！）</p>
	   </div> 
</section>
